import React from 'react';
import { Breadcrumb, Button, Form, Input, Row, Col, Message, Modal} from 'antd';
const FormItem = Form.Item;
const confirm = Modal.confirm;
let AccountInfo = React.createClass({


  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    return {
      loading:false,
      visible:false,
      count: 60,
      time: true
    }
  },
  fetchCode() {
    let form = this.props.form.getFieldsValue();
    let me = this;
    let params = Object.assign({},{nid: 'updatePhone', validCode: 9999},form);
    timer=setInterval(function(){
      let count = me.state.count;
      count--;
      if(count<1){
        me.setState({
          time: true
        })
        clearInterval(timer)
        count = 60;
        
      }
     me.setState({
    count: count
  })
    },1000)

    Utils.sendAjax({
      url: '/message/sms/send',
      data: JSON.stringify(params),
      callback: (result) => {
        if (result.code =='200') {
          Message.success('验证码已发送，请注意查收');
          me.setState({
            time: false
          })
        }else{
          Message.error(result.message, 10);
        }
      }
    })
  },

  showModel(){
    let _me = this;
      confirm({
        title: '您确定要绑定此手机吗？',
        onOk() {
            _me.handleSubmit();
        }
      }),

    this.setState({
      visible: true
    })
  },

  handleSubmit() {
    let forms = this.props.form.getFieldsValue();
    let params = Object.assign({},{nid: 'updatePhone'}, forms);
    this.props.form.validateFields((errors, values) => {
      if (!!errors) {
        console.log('Errors in form!!!');
        return;
      }
      this.setState({
        loading: true,
      });
      Utils.sendAjax({
        url: '/user/updatePhone',
        data: JSON.stringify(params),
        callback: (result) => {
          if (result.code === '200') {
            Message.success(result.message);
            this.handleOk();
            this.context.router.push('/');
          } else {
            this.setState({
              loading: false,
            });
            Message.error(result.message, 10);
          }
        }
      });
    });
  },
  handleCancel(){
    this.setState({
      visible: false
    })
  },
  handleOk() {
    Utils.sendAjax({
      url: '/funder/logout',
      callback: (result)=> {
        if (result.code == 200) {
          localStorage.funderUserName = '';
          localStorage.funderUserName = '';
        }
      }
    })
  },
  render() {
    const text = this.state.time ? '获取验证码' : this.state.count+'s后可重新获取';
    const canClick = this.state.time ? false : true;
    const { getFieldProps } = this.props.form;
    const formItemLayout = {
      labelCol: {span: 4},
      wrapperCol: {span: 7},
    };
    return (
      <div className="inner-content">
        <Form horizontal form={this.props.form}>
          <FormItem
            {...formItemLayout}
            label="绑定手机号">
            <Input {...getFieldProps('mobilePhone',{initialValue: '',rules: [{required: true,message: '请输入手机号'},{validator:Utils.phone}]})} style={{width: '50%', marginRight: 10}}/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="手机验证码">
            <Input {...getFieldProps('phoneCode')} style={{width: '50%', marginRight: 10}}/>
            <Button onClick={this.fetchCode} disabled={canClick}>{text}</Button>
          </FormItem>
          <FormItem wrapperCol={{ span: 10, offset: 4 }} style={{ marginTop: 24 }}>
            <Button type="primary" loading={this.state.loading} onClick={this.showModel} >绑定</Button>
          </FormItem>
        </Form>
      </div>
    );
  }
});
AccountInfo = Form.create()(AccountInfo)
export default AccountInfo